<template>
  <view>
    <!-- <el-upload class="upload-demo" :action="uploadFileUrl" :headers="file_headers" :data="file_params" name="file" :on-preview="filePreview" :on-success="fileSuccess" :file-list="newList">
      <el-button type="info" size="mini">点击上传</el-button>
    </el-upload> -->
    <view class="ul-image">
      <view v-for="(item,index) in newList" :key="index" class="li-image">
        <image class="image1" :src="prefixUrl+item.url" alt=""></image>
        <image class="close-btn" @click="fileRemove(item)" src="../../../static/close.png"></image>
      </view>
      <view class="li-image border" @click="chooseImage">
        <image class="choose-image" src="../../../static/choose-image.png" alt=""></image>
      </view>
    </view>
  </view>
</template>

<script>
import { getToken } from '@/utils/auth' // get token from cookie

export default {
  // eslint-disable-next-line vue/require-prop-types
  props: ['filelist', 'type'],
  name: 'uploadImage',
  data() {
    return {
      newList: [],
      // 表单参数
      form: {},
      uploadFileUrl: process.uniEnv.baseUrl + '/fileInfo',
      prefixUrl: process.uniEnv.baseUrl + '/profile',
      file_params: {
        fileSource: 'LOCAL'
      },
      file_headers: {
        authorization: 'Bearer ' + getToken()
      }
    }
  },
  created() {
    if (this.filelist) {
      this.newList = [...this.filelist]
    }
  },
  methods: {
    chooseImage(){
      let _this = this
      uni.chooseImage({
        count: 6, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album'], //从相册选择
        success: function (res) {
          let img = [];
          for (let i = 0; i < res.tempFiles.length; i++) {  
            let obj = new Object();  
            obj.name = "files";  
            obj.uri = res.tempFiles[i].path; 
            obj.file =  res.tempFiles[i]
            img.push(obj);
          }
          uni.uploadFile({
            url: process.uniEnv.baseUrl + '/fileInfo/uploadFiles', //仅为示例，非真实的接口地址
            files: img,
            header: {
              authorization: 'Bearer ' + getToken()
            },
            formData: {
              'fileSource': 'LOCAL'
            },
            success: (uploadFileRes) => {
              if(uploadFileRes.statusCode===200&&uploadFileRes.data){
                _this.newList = _this.newList.concat(JSON.parse(uploadFileRes.data))
                _this.$emit('getFileList', _this.newList, _this.type)
              }
            }
          });
        }
      });
    },
    fileRemove(file) {
      let _this = this;
      uni.showModal({
          title: '提示',
          content: '确定移除？',
          success: function (res) {
              if (res.confirm) {
                for (let i = 0; i < _this.newList.length; i++) {
                  if (_this.newList[i].id === file.id) {
                    _this.newList.splice(i, 1)
                  }
                }
                _this.$emit('getFileList', _this.newList, _this.type)
                uni.showToast({
                    title: '删除成功',
                    duration: 2000
                });
              } else if (res.cancel) {
                  console.log('用户点击取消');
              }
          }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-upload-list--text {
  display: none;
}
.ul-image{
  display: flex;
  flex-wrap: wrap;
  padding: 0 0 30upx 0;
  .li-image{
    position: relative;
    margin-right: 30upx;
    margin-top: 30upx;
    align-items: center;
    display: flex;
    justify-content: center;

    &.border{
      border: 1px solid #f1f1f1;
    }
    .image1{
      width: 140upx;
      height: 140upx;
    }

    .choose-image{
      width: 140upx;
      height: 140upx;
    }

    .close-btn{
      position: absolute;
      width: 40upx;
      height: 40upx;
      top: -20upx;
      right: -20upx;
      cursor: pointer;
    }
  }
}
</style>

